<script setup lang='ts' name="hot">
import { useOpen } from '@/pages/home/component/use-open'
import { useGetHomeCategory, useGetHomeProductList } from '@fl/api/man-api'
import { computed, ref, watchEffect } from 'vue'

import SenceTab from './sence-tab.vue'

const { openNewWindow } = useOpen()

const activeName = ref(0)

const { data } = useGetHomeCategory()

const res: any = useGetHomeProductList({
    catId: '',
})

const tabs = computed(() => {
    const target = res.data.value
    let tabs = []
    if (target?.length) {
        tabs = target.map((v: any) => {
            return {
                label: v.catName,
                value: v.catId,
            }
        })
    }
    return tabs
})

const pdData = computed(() => {
    const target = res.data.value
    let list: any = []
    if (target?.length) {
        const item = target.find((v: any) => v.catId === activeName.value)
        if (item && item.products.length) {
            list = [
                ...item.products,
            ]
        }
    }

    return list
})

function handle({ item }) {
    console.log('tab-change', item)
    console.log('商品', pdData.value)
}

function goToDetail(item: any) {
    openNewWindow('/product-info', {
        id: item.productNo,
        type: item.bizType,
    })
}

function viewMore() {
    const item = getItem(data.value, activeName.value)

    if (item?.children) {
        Reflect.deleteProperty(item, 'children')
    }

    openNewWindow('/search', item, '_self')
}

// 查找当前产品所属类目
function getItem(tree: any, catId: any) {
    let target: any = {}

    function flatten(nodes: any) {
        nodes.forEach((v: any) => {
            if (`${v.cid}` === catId) {
                target = v
            }
            else {
                if (v.children) {
                    flatten(v.children)
                }
            }
        })
    }

    flatten(tree)

    return target
}

watchEffect(() => {
    if (res.data.value) {
        activeName.value = res.data.value[0]?.catId
    }
})
</script>

<template>
    <div class="hot pb-60 pt-60 w-100%">
        <div class="mx-auto h-1050 w-1300">
            <SenceTab v-model="activeName"
                      title="热销单品"
                      trans="HOT COMMODITY"
                      :tabs="tabs"
                      @handle="handle"
            />

            <div class="mt-60 flex flex-wrap">
                <template v-for="(item, index) in pdData"
                          :key="index"
                >
                    <!-- <div v-if="index === 0"
                         class="h-398 w-640 cursor-pointer"
                         @click="goToDetail(item)"
                    >
                        <img class="rounded-4 h-100% w-100%"
                             :src="img"
                             alt=""
                        >
                    </div> -->

                    <div class="mb-13 mr-10 bg-#fff rounded-4 text-center h-398 w-310 cursor-pointer"
                         @click="goToDetail(item)"
                    >
                        <div class="h-298 w-310"
                             :style="{ background: `url('${item.productImage}') 0% 0% / auto 100% no-repeat` }"
                             alt=""
                        />

                        <p class="mt-16 text-16 c-#1D2129 font-600 text-ellipsis cursor-pointer ws-nowrap of-hidden">
                            {{ item?.productName }}
                        </p>

                        <!-- <p class="mb-10 text-14 c-#767676">
                            KEMO785489050
                        </p>

                        <p class="c-#DA0004">
                            ¥ 8900.00
                        </p> -->
                    </div>
                </template>
            </div>

            <div class="mx-auto mt-47 border-1 border-#DA0004 border-solid text-16 c-#DA0004 lh-48 text-center h-48 w-360 cursor-pointer"
                 @click="viewMore"
            >
                查看更多
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.hot {
    background: url('https://public-obs-cdn.anjulian.com.cn/2024-05-28/df83971b-f9ff-4fc9-a0bd-fac8cb53fe3a.png')
        0% 0% / 100% 100% no-repeat;
}
</style>
